<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Editor Custom Plugin Test/Tutorial</title>

	<script type="text/javascript" src="../boilerplate.js"></script>

	<style>
		.customIconHtmlToggle {
			background-image: url('customIcon.gif'); /* custom editor icons sprite image */
			background-repeat: no-repeat;
			width: 18px;
			height: 18px;
			text-align: center;
		}
	</style>

	<script type="text/javascript">
		require([
			"dojo/_base/declare",
			"dojo/dom-construct",
			"dojo/dom-geometry",
			"dojo/dom-style",
			"dojo/_base/lang",
			"dojo/parser",
			"dojo/sniff",
			"dijit/registry",
			"dijit/Editor",
			"dijit/_editor/_Plugin",
			"dijit/form/ToggleButton",
			"dojo/domReady!"
		], function(declare, domConstruct, domGeom, domStyle, lang, parser, has, registry, Editor, _Plugin, ToggleButton){

			var MyPlugin = declare("MyPlugin", _Plugin, {
				buttonClass: ToggleButton,
				useDefaultCommand: false,
				name: "MyPlugin",

				_initButton: function(){
					this.command = "htmlToggle";
					this.editor.commands[this.command] = "View HTML source"; // note: should be localized
					this.iconClassPrefix = "customIcon";
					this.inherited(arguments);
					delete this.command; // kludge so setEditor doesn't make the button invisible
					this.button.on("click", lang.hitch(this, "_toggleSource"));
				},

				destroy: function(f){
					this.inherited(arguments);
					if(this.sourceArea){ domConstruct.destroy(this.sourceArea); }
				},

				_toggleSource: function(){
					this.source = !this.source;
					if(!this.sourceArea){
						this.sourceArea = document.createElement('textarea');
						this.sourceArea.style.position = 'absolute';
						this.sourceArea.setAttribute("aria-label", "sourceArea");
						domConstruct.place(this.sourceArea, this.editor.domNode, "last");
					}
					if(this.source){
						this.sourceArea.style.display = "";
						this.sourceArea.value = this.editor.getValue();
						domStyle.set(this.sourceArea, "borderWidth",
								domStyle.get(this.editor.editingArea, "borderStyle") == "none" ? "0" :
										domStyle.get(this.editor.editingArea, "borderWidth"));
						domGeom.setMarginBox(this.sourceArea, domGeom.getMarginBox(this.editor.editingArea));
						if(has("ie")){
							//work around IE oddity with offsetParent mismatch
							var p = domGeom.position(this.editor.editingArea);
							domStyle.set(this.sourceArea, { left: p.x, top: p.y });
						}
					}else{
						this.editor.setValue(this.sourceArea.value);
						this.sourceArea.style.top = "-999px";
						this.sourceArea.style.display = "none";
					}

					this.button.set('label', this.source ? "View WYSIWYG" : this.editor.commands["htmlToggle"]); // note: should be localized
				}
			});
	
			/* the following code registers my plugin */
			_Plugin.registry["MyPlugin"] = function(args){
				return new MyPlugin({});
			};
			
			parser.parse();
		});
	</script>
</head>
<body class="claro" role="main">
	<div id="editor1" data-dojo-type="dijit/Editor" data-dojo-props='"aria-label":"editorExtraPlugin",extraPlugins:["MyPlugin"], height: 150'><p>
	This editor should have my custom plugin
	</p></div>
</body>
</html>
